<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="left">我的钱包</p>
    </header>
    
    <!-- 钱包内容 -->
    <div class="wallet-content">
      <div v-if="loading" class="wallet-loading">
        <i class="fa fa-spinner fa-spin"></i>
        正在加载钱包信息...
      </div>

      <template v-else>
        <div v-if="hasWallet" class="wallet-section">
          <div class="wallet-summary-card gradient">
            <div class="summary-header">
              <div class="summary-balance">
                <label>可用余额</label>
                <span>¥{{ formatCurrency(wallet.balance) }}</span>
              </div>
              <div class="summary-status">
                <label>钱包状态</label>
                <span class="status-badge" :class="wallet.status?.toLowerCase()">{{ getWalletStatusText(wallet.status) }}</span>
              </div>
            </div>
            <div class="summary-actions">
              <button class="primary" @click="toRecharge" :disabled="isProcessing">充值</button>
              <button class="secondary" @click="toWithdraw" :disabled="isProcessing">提现</button>
              <button class="vip" @click="openVip" :disabled="vipProcessing || wallet.isVip">
                {{ wallet.isVip ? 'VIP已开通' : vipProcessing ? '开通中...' : '开通VIP' }}
              </button>
            </div>
          </div>

          <div class="wallet-detail-grid">
            <div class="detail-card">
              <label>冻结金额</label>
              <span>¥{{ formatCurrency(wallet.frozenAmount) }}</span>
            </div>
            <div class="detail-card">
              <label>可支配余额</label>
              <span>¥{{ formatCurrency(wallet.availableBalance) }}</span>
            </div>
            <div class="detail-card">
              <label>累计奖励</label>
              <span>¥{{ formatCurrency(wallet.bonusAmount) }}</span>
            </div>
            <div class="detail-card">
              <label>透支额度</label>
              <span>¥{{ formatCurrency(wallet.overdraftLimit) }}</span>
            </div>
            <div class="detail-card">
              <label>已用透支</label>
              <span>¥{{ formatCurrency(wallet.overdraftUsed) }}</span>
            </div>
            <div class="detail-card">
              <label>剩余透支</label>
              <span>¥{{ formatCurrency(wallet.remainingOverdraft) }}</span>
            </div>
            <div class="detail-card">
              <label>账面总资产</label>
              <span>¥{{ formatCurrency(wallet.totalAssets) }}</span>
            </div>
            <div class="detail-card">
              <label>待付利息</label>
              <span>¥{{ formatCurrency(wallet.interestDue) }}</span>
            </div>
            <div class="detail-card">
              <label>VIP状态</label>
              <span>{{ wallet.isVip ? '已开通' : '未开通' }}</span>
            </div>
          </div>

          <div class="wallet-tips">
            <h3>钱包说明</h3>
            <ul>
              <li>支付订单时会冻结对应金额，确认收货后自动解冻并转给商家。</li>
              <li>开通VIP后可使用透支额度，充值或还款会优先偿还透支部分。</li>
              <li>若余额或状态异常，请及时联系平台客服处理。</li>
            </ul>
          </div>
        </div>

        <div v-else class="wallet-empty">
          <i class="fa fa-wallet wallet-icon"></i>
          <h3>您尚未开通钱包功能</h3>
          <p>开通钱包后即可使用余额支付、充值和提现。</p>
          <button @click="createWallet" :disabled="isCreating">
            {{ isCreating ? '申请中...' : '立即申请' }}
          </button>
        </div>
      </template>
    </div>

    <!-- 充值弹窗 -->
    <div v-if="showRechargeModal" class="modal-overlay" @click="closeRechargeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>充值</h3>
          <i class="fa fa-times" @click="closeRechargeModal"></i>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <label>充值金额：</label>
            <input type="number" v-model="rechargeAmount" placeholder="请输入充值金额" min="0.01" step="0.01">
          </div>
          <div class="amount-options">
            <button v-for="amount in amountOptions" :key="amount" 
                    @click="setRechargeAmount(amount)"
                    :class="{ active: rechargeAmount === amount }">
              {{ amount }}元
            </button>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeRechargeModal" class="btn-cancel">取消</button>
          <button @click="confirmRecharge" class="btn-confirm" :disabled="!rechargeAmount || isProcessing">
            {{ isProcessing ? '处理中...' : '确认充值' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 提现弹窗 -->
    <div v-if="showWithdrawModal" class="modal-overlay" @click="closeWithdrawModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>提现</h3>
          <i class="fa fa-times" @click="closeWithdrawModal"></i>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <label>提现金额：</label>
            <input type="number" v-model="withdrawAmount" placeholder="请输入提现金额" min="0.01" step="0.01">
          </div>
          <div class="balance-info">
            <p>可用余额：{{ wallet.balance?.toFixed(2) || '0.00' }}元</p>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeWithdrawModal" class="btn-cancel">取消</button>
          <button @click="confirmWithdraw" class="btn-confirm" :disabled="!withdrawAmount || isProcessing || withdrawAmount > wallet.balance">
            {{ isProcessing ? '处理中...' : '确认提现' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-text">
        <i class="fa fa-spinner fa-spin"></i>
        加载中...
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyWallet',
  data() {
    return {
      wallet: {
        walletId: null,
        userId: null,
        balance: 0,
        frozenAmount: 0,
        overdraftLimit: 0,
        overdraftUsed: 0,
        remainingOverdraft: 0,
        availableBalance: 0,
        totalAssets: 0,
        bonusAmount: 0,
        isVip: false,
        status: 'NORMAL',
        interestDue: 0
      },
      user: {},
      loading: false,
      isCreating: false,
      hasWallet: false,
      walletChecked: false,
      
      // 充值相关数据
      showRechargeModal: false,
      rechargeAmount: '',
      isProcessing: false,
      vipProcessing: false,
      
      // 提现相关数据
      showWithdrawModal: false,
      withdrawAmount: '',
      
      // 金额选项
      amountOptions: [50, 100, 200, 500, 1000],

      // VIP相关数据
      showVipModal: false,
    }
  },
  async created() {
    await this.initializeWallet();
  },
  methods: {
    // 初始化钱包
    async initializeWallet() {
      this.user = this.$getSessionStorage('user');
      
      // 验证用户信息
      if (!this.user?.userId || !this.user?.token) {
        this.$router.push('/login');
        return;
      }
      
      await this.checkWallet();
      this.walletChecked = true;
    },
    
    // 检查钱包状态
    async checkWallet() {
      try {
        this.loading = true;
        
        // 使用新的API: GET /api/virtual-wallets/user/{userId}
        const response = await this.$axios.get(`/api/virtual-wallets/user/${this.user.userId}`);
        
        if (response.data.success) {
          if (response.data.data) {
            this.wallet = this.normalizeWallet(response.data.data);
            this.hasWallet = true;
            console.log('钱包信息加载成功:', this.wallet);
          } else {
            this.hasWallet = false;
            console.log('用户未开通钱包');
          }
        } else {
          console.error('获取钱包信息失败:', response.data.message);
          this.hasWallet = false;
        }
      } catch (error) {
        console.error('获取钱包信息失败:', error);
        // 404错误表示用户还没有钱包
        if (error.response?.status === 404) {
          this.hasWallet = false;
          console.log('用户未开通钱包');
        } else {
          this.handleApiError(error, '获取钱包信息');
          this.hasWallet = false;
        }
      } finally {
        this.loading = false;
      }
    },
    
    // 创建钱包
    async createWallet() {
      if (this.isCreating) return;
      this.isCreating = true;
      
      try {
        const headers = this.user?.token ? { Authorization: `Bearer ${this.user.token}` } : {};
        const response = await this.$axios.post(
          `/api/virtual-wallets?userId=${this.user.userId}`,
          null,
          { headers }
        );
        
        if (response.data.success) {
          this.showSuccessMessage('钱包申请成功！');
          
          // 更新钱包状态
          this.wallet = this.normalizeWallet(response.data.data);
          this.hasWallet = true;
          
          // 重新加载钱包信息确保数据完整
          await this.checkWallet();
        } else {
          this.showErrorMessage('钱包申请失败: ' + (response.data.message || ''));
        }
      } catch (error) {
        console.error('钱包申请失败1:', error);
        this.handleApiError(error, '钱包申请');
      } finally {
        this.isCreating = false;
      }
    },
    
    // 打开充值弹窗
    toRecharge() {
      if (!this.hasWallet) {
        this.showErrorMessage('请先开通钱包功能');
        return;
      }
      
      this.rechargeAmount = '';
      this.showRechargeModal = true;
    },
    
    // 关闭充值弹窗
    closeRechargeModal() {
      this.showRechargeModal = false;
      this.rechargeAmount = '';
    },
    
    // 设置充值金额
    setRechargeAmount(amount) {
      this.rechargeAmount = amount;
    },
    
    // 确认充值
    async confirmRecharge() {
      if (!this.rechargeAmount || parseFloat(this.rechargeAmount) <= 0) {
        this.showErrorMessage('请输入有效的充值金额');
        return;
      }
      
      this.isProcessing = true;
      
      try {
        // 使用新的API: POST /api/virtual-wallets/recharge
        const response = await this.$axios.post('/api/virtual-wallets/recharge', {
          walletId: this.wallet.walletId,
          amount: parseFloat(this.rechargeAmount),
          remark: '用户充值'
        });
        
        if (response.data.success) {
          const transaction = response.data.data;
          this.showSuccessMessage(`充值成功！金额：${this.rechargeAmount}元`);
          this.closeRechargeModal();
          
          // 重新加载钱包余额
          await this.checkWallet();
        } else {
          this.showErrorMessage('充值失败: ' + (response.data.message || ''));
        }
      } catch (error) {
        console.error('充值失败:', error);
        this.handleApiError(error, '充值');
      } finally {
        this.isProcessing = false;
      }
    },
    
    // 打开提现弹窗
    toWithdraw() {
      if (!this.hasWallet) {
        this.showErrorMessage('请先开通钱包功能');
        return;
      }
      
      if (this.wallet.balance <= 0) {
        this.showErrorMessage('余额不足，无法提现');
        return;
      }
      
      this.withdrawAmount = '';
      this.showWithdrawModal = true;
    },
    
    // 关闭提现弹窗
    closeWithdrawModal() {
      this.showWithdrawModal = false;
      this.withdrawAmount = '';
    },
    
    // 确认提现
    async confirmWithdraw() {
      if (!this.withdrawAmount || parseFloat(this.withdrawAmount) <= 0) {
        this.showErrorMessage('请输入有效的提现金额');
        return;
      }
      
      if (parseFloat(this.withdrawAmount) > this.wallet.balance) {
        this.showErrorMessage('提现金额不能超过可用余额');
        return;
      }
      
      this.isProcessing = true;
      
      try {
        // 使用新的API: POST /api/virtual-wallets/withdraw
        const response = await this.$axios.post('/api/virtual-wallets/withdraw', {
          walletId: this.wallet.walletId,
          amount: parseFloat(this.withdrawAmount),
          remark: '用户提现'
        });
        
        if (response.data.success) {
          const transaction = response.data.data;
          this.showSuccessMessage(`提现成功！金额：${this.withdrawAmount}元`);
          this.closeWithdrawModal();
          
          // 重新加载钱包余额
          await this.checkWallet();
        } else {
          this.showErrorMessage('提现失败: ' + (response.data.message || ''));
        }
      } catch (error) {
        console.error('提现失败:', error);
        this.handleApiError(error, '提现');
      } finally {
        this.isProcessing = false;
      }
    },

    showSuccessMessage(message) {
      alert(message);
    },

    showErrorMessage(message) {
      alert(message);
    },

    // 统一的 API 错误处理方法
    handleApiError(error, operation) {
      console.error(`${operation}失败:`, {
        message: error.message,
        status: error.response?.status,
        data: error.response?.data
      });
      
      if (error.response?.status === 500) {
        this.showErrorMessage('服务器内部错误，请稍后再试');
      } else if (error.response?.status === 403) {
        this.showErrorMessage('当前账号暂无权限执行此操作');
      } else if (error.response?.status === 404) {
        this.showErrorMessage('请求的资源不存在');
      } else if (error.response?.status === 401) {
        this.showErrorMessage('用户未登录或会话已过期');
        this.$router.push('/login');
      } else if (error.response?.data?.message) {
        this.showErrorMessage(`${operation}失败: ${error.response.data.message}`);
      } else {
        this.showErrorMessage(`${operation}失败，请检查网络连接`);
      }
    },

    async openVip() {
      if (!this.hasWallet) {
        this.showErrorMessage('请先开通钱包功能');
        return;
      }

      if (this.wallet.isVip) {
        this.showSuccessMessage('您已经是VIP用户');
        return;
      }

      this.vipProcessing = true;

      try {
        const headers = this.user?.token ? { Authorization: `Bearer ${this.user.token}` } : {};
        const response = await this.$axios.post(`/api/virtual-wallets/${this.wallet.walletId}/set-vip`, null, { headers });

        if (response.data.success) {
          this.showSuccessMessage('VIP开通成功！');
          await this.checkWallet();
        } else {
          this.showErrorMessage('VIP开通失败: ' + (response.data.message || '未知错误'));
        }
      } catch (error) {
        console.error('开通VIP失败:', error);
        this.handleApiError(error, '开通VIP');
      } finally {
        this.vipProcessing = false;
      }
    },

    // 格式化货币
    formatCurrency(value) {
      const number = Number(value);
      if (Number.isNaN(number)) {
        return '0.00';
      }
      return number.toFixed(2);
    },

    // 获取钱包状态文本
    getWalletStatusText(status) {
      switch (status) {
        case 'NORMAL':
          return '正常';
        case 'FROZEN':
          return '冻结';
        case 'OVERDRAFT':
          return '透支';
        case 'CLOSED':
          return '已关闭';
        default:
          return status;
      }
    }
    ,
    normalizeWallet(data) {
      const clone = { ...data };
      if (clone.isVip === undefined && clone.vip !== undefined) {
        clone.isVip = clone.vip;
      }
      return clone;
    }
  }
}
</script>

<style scoped>
  /* 总容器 */
  .wrapper {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    position: relative;
  }

  /* 头部 */
  .wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #00abf5;
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .wrapper header .left {
    flex: 3;
    margin-left: 8vw;
    font-size: 4.8vw;
  }

  .wrapper header .right {
    margin-right: 4vw;
    font-size: 3.5vw;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .wrapper header .right .fa-list-ul {
    margin-right: 1vw;
    font-size: 4vw;
  }

  /* 钱包内容 */
  .wallet-content {
    width: 92%;
    margin: 14vw auto 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4vw;
  }

  .wallet-loading {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 4vw;
    background-color: #fff;
    border-radius: 12px;
    padding: 12vw 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  }

  .wallet-loading i {
    font-size: 8vw;
    margin-bottom: 2vw;
  }

  .wallet-section {
    background: linear-gradient(135deg, #0097FF 0%, #38CA73 100%);
    border-radius: 16px;
    padding: 4vw;
    color: #fff;
    box-shadow: 0 20px 45px rgba(0, 151, 255, 0.25);
    position: relative;
    overflow: hidden;
  }

  .wallet-summary-card.gradient {
    display: flex;
    flex-direction: column;
    gap: 3vw;
  }

  .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4vw;
    flex-wrap: wrap;
  }

  .summary-balance label,
  .summary-status label {
    font-size: 3.5vw;
    opacity: 0.85;
  }

  .summary-balance span {
    font-size: 8vw;
    font-weight: 700;
  }

  .summary-status .status-badge {
    display: inline-block;
    padding: 1vw 3vw;
    border-radius: 999px;
    font-size: 3.5vw;
    font-weight: 600;
    color: #0b2b37;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .summary-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3vw;
  }

  .summary-actions button {
    height: 12vw;
    border: none;
    border-radius: 999px;
    font-size: 4.2vw;
    font-weight: 600;
    color: #0b2b37;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 20px rgba(13, 64, 125, 0.15);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }

  .summary-actions button:hover:not(:disabled) {
    transform: translateY(-4px);
    box-shadow: 0 18px 26px rgba(13, 64, 125, 0.25);
    background: rgba(255, 255, 255, 0.28);
  }

  .summary-actions button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }

  .summary-actions .primary {
    background: rgba(255, 255, 255, 0.9);
    color: #0b7ddb;
  }

  .summary-actions .secondary {
    background: rgba(13, 64, 125, 0.2);
    color: #fff;
  }

  .summary-actions .vip {
    background: rgba(255, 255, 255, 0.8);
    color: #2f9955;
  }

  .wallet-detail-grid {
    margin-top: 4vw;
    background: #fff;
    border-radius: 12px;
    padding: 4vw 3vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3vw;
    color: #333;
  }

  .detail-card {
    background: linear-gradient(135deg, rgba(0, 151, 255, 0.1), rgba(56, 202, 115, 0.1));
    border-radius: 12px;
    padding: 3vw;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    box-shadow: inset 0 0 0 1px rgba(0, 151, 255, 0.12);
  }

  .detail-card label {
    font-size: 3.4vw;
    color: #5d6a7a;
  }

  .detail-card span {
    font-size: 4.5vw;
    font-weight: 600;
    color: #0b2b37;
  }

  .wallet-tips {
    margin-top: 4vw;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 4vw;
    color: #0b2b37;
    box-shadow: 0 18px 30px rgba(13, 64, 125, 0.1);
  }

  .wallet-tips h3 {
    font-size: 4.2vw;
    margin-bottom: 2vw;
    display: flex;
    align-items: center;
    gap: 2vw;
  }

  .wallet-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8vw;
  }

  .wallet-tips li {
    position: relative;
    padding-left: 3.2vw;
    font-size: 3.5vw;
    color: #485766;
  }

  .wallet-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.6vw;
    width: 1.4vw;
    height: 1.4vw;
    border-radius: 50%;
    background: linear-gradient(135deg, #0097FF, #38CA73);
  }

  .wallet-empty {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 10vw 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vw;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  }

  .wallet-empty .wallet-icon {
    font-size: 12vw;
    color: #0097FF;
  }

  .wallet-empty button {
    margin-top: 3vw;
    padding: 3vw 8vw;
    border: none;
    border-radius: 999px;
    font-size: 4vw;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0097FF, #38CA73);
    box-shadow: 0 12px 24px rgba(0, 151, 255, 0.25);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .wallet-empty button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
  }

  .wallet-empty button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(0, 151, 255, 0.3);
  }

  /* 模态框样式 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
  }

  .modal-content {
    background-color: white;
    border-radius: 8px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw;
    border-bottom: 1px solid #eee;
  }

  .modal-header h3 {
    margin: 0;
    font-size: 4vw;
    color: #333;
  }

  .modal-header .fa-times {
    font-size: 4vw;
    color: #999;
    cursor: pointer;
  }

  .modal-body {
    padding: 4vw;
  }

  .input-group {
    margin-bottom: 3vw;
  }

  .input-group label {
    display: block;
    font-size: 3.8vw;
    color: #666;
    margin-bottom: 2vw;
  }

  .input-group input {
    width: 70%;
    height: 10vw;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 3vw;
    font-size: 3.8vw;
    outline: none;
  }

  .amount-options {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    margin-top: 3vw;
  }

  .amount-options button {
    flex: 1;
    min-width: 30%;
    height: 8vw;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
    font-size: 3.5vw;
    cursor: pointer;
    transition: all 0.3s;
  }

  .amount-options button.active {
    background-color: #00abf5;
    color: white;
    border-color: #00abf5;
  }

  .balance-info {
    margin-top: 3vw;
    padding: 2vw;
    background-color: #f9f9f9;
    border-radius: 4px;
  }

  .balance-info p {
    margin: 0;
    font-size: 3.5vw;
    color: #666;
  }

  .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 2vw;
    padding: 3vw;
    border-top: 1px solid #eee;
  }

  .modal-footer button {
    padding: 2vw 4vw;
    border: none;
    border-radius: 4px;
    font-size: 3.5vw;
    cursor: pointer;
  }

  .btn-cancel {
    background-color: #95a5a6;
    color: white;
  }

  .btn-confirm {
    background-color: #00abf5;
    color: white;
  }

  .btn-confirm:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }

  /* 加载状态 */
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
  }

  .loading-text {
    font-size: 4vw;
    color: #666;
    display: flex;
    align-items: center;
    gap: 2vw;
  }

  .loading-text .fa-spinner {
    font-size: 5vw;
  }

  /* 响应式设计 */
  @media (min-width: 768px) {
    .wallet-content {
      max-width: 500px;
      height: 300px;
    }
    
    .wallet-content .summary-balance span {
      font-size: 18px;
    }

    .wallet-content .summary-status .status-badge {
      font-size: 16px;
    }

    .wallet-content .summary-actions button {
      height: 40px;
      font-size: 16px;
    }

    .wallet-content .detail-card span {
      font-size: 18px;
    }

    .wallet-content .wallet-tips h3 {
      font-size: 18px;
    }

    .wallet-content .wallet-tips li {
      font-size: 16px;
    }

    .wallet-content .wallet-empty .wallet-icon {
      font-size: 45px;
    }

    .wallet-content .wallet-empty h3 {
      font-size: 18px;
    }

    .wallet-content .wallet-empty p {
      font-size: 16px;
    }

    .wallet-content .wallet-empty button {
      height: 45px;
      font-size: 16px;
    }
    
    .modal-content {
      max-width: 400px;
    }
    
    .modal-header h3 {
      font-size: 18px;
    }
    
    .input-group input {
      height: 40px;
      font-size: 16px;
    }
    
    .amount-options button {
      height: 35px;
      font-size: 14px;
    }
    
    .modal-footer button {
      padding: 10px 20px;
      font-size: 14px;
    }
  }
</style>
